const IS_DISABLED_CLASS = 'is-disabled'

/**
 * 表单处理配置项的类型
 */
export type configurationList = {
    // 禁用项
    disabled?: string[],
    // 可写项
    writable?: string[],
    // 隐藏项
    hidden?: string[]
}

/**
 * 对表单项是否禁用和隐藏进行处理
 * @param configurationList 
 */
const disabledDomHandle = (configurationList: configurationList) => {
    const formItemList = document.querySelectorAll('div[jxtech-form-item-id]') as NodeListOf<HTMLElement>
    for (let i = 0; i < formItemList.length; i++) {
        const targetDomAttr = formItemList[i].getAttribute('jxtech-form-item-id')
        if (Array.isArray(configurationList.disabled)) {
            configurationList.disabled?.forEach((element: string | null) => {
                if (targetDomAttr == element) {
                    // 对当前item 显示禁止图标
                    formItemList[i].style.cursor = "not-allowed"
                    // 对原生的input标签禁用 和鼠标悬浮样式设为禁止
                    const inputTagList = formItemList[i].getElementsByTagName("input")
                    for (let i = 0; i < inputTagList.length; i++) {
                        inputTagList[i].disabled = true
                        inputTagList[i].readOnly = true
                    }
                    // 选中对应类名的标签
                    const inputList = formItemList[i].getElementsByClassName("el-input") as HTMLCollectionOf<HTMLElement>
                    const selectList = formItemList[i].getElementsByClassName("el-select") as HTMLCollectionOf<HTMLElement>
                    const switchList = formItemList[i].getElementsByClassName("el-switch") as HTMLCollectionOf<HTMLInputElement>
                    const checkBoxList = formItemList[i].getElementsByClassName("el-checkbox") as HTMLCollectionOf<HTMLInputElement>
                    const radioList = formItemList[i].getElementsByClassName("el-radio") as HTMLCollectionOf<HTMLElement>
                    const textareaList = formItemList[i].getElementsByClassName("el-textarea") as HTMLCollectionOf<HTMLElement>
                    // 多种输入选择框的禁止行为处理
                    disableInputDomHandle(inputList)
                    disabletextareaDomHandle(textareaList)
                    disabledSelectDomHandle(selectList)
                    disabledSwitchDomHandle(switchList)
                    disabledCheckBoxDomHandle(checkBoxList)
                    disabledRadioDomHandle(radioList)
                }
            })
        } else if (typeof configurationList.disabled) {

        }
        // configurationList.hidden?.forEach((element: any) => {
        //     if (targetDomAttr == element) {
        //         formItemList[i].style.display = 'none'
        //     }
        // })
        // configurationList.writable?.forEach((element: string | null) => {
        //     if (targetDomAttr == element) {
        //         formItemList[i].getElementsByTagName("input")[0].disabled = false
        //         formItemList[i].getElementsByTagName("input")[0].style.cursor = 'auto'
        //     }
        // })
    }
}
/**
 * 对表单项下的 类名为 .el-input进行处理
 * @param inputList 
 */
const disableInputDomHandle = (inputList: HTMLCollectionOf<HTMLElement>) => {
    if (inputList && inputList.length > 0) {
        for (let i = 0; i < inputList.length; i++) {
            inputList[i].classList.add(IS_DISABLED_CLASS)
        }
    }
}
/**
 * 对表单项下的 类名 .el-select进行处理
 * @param selectList 
 */
const disabledSelectDomHandle = (selectList: HTMLCollectionOf<HTMLElement>) => {
    if (selectList && selectList.length > 0) {
        for (let i = 0; i < selectList.length; i++) {
            selectList[i].classList.add(IS_DISABLED_CLASS)
            selectList[i].style.pointerEvents = 'none'
            const disabledSpan = selectList[i].getElementsByClassName('el-input__suffix-inner')[0] as HTMLElement
            disabledSpan.style.pointerEvents = 'none'
        }
    }
}
/**
 * 开关禁止
 * @param switchList 
 */
const disabledSwitchDomHandle = (switchList: HTMLCollectionOf<HTMLInputElement>) => {
    // console.log(switchList)
    for (let i = 0; i < switchList.length; i++) {
        switchList[i].style.pointerEvents = 'none'
        switchList[i].classList.add(IS_DISABLED_CLASS)
        switchList[i].getElementsByClassName('el-switch__core')[0]
    }
}
/**
 * 选择框禁止
 * @param checkBoxList 
 */
const disabledCheckBoxDomHandle = (checkBoxList: HTMLCollectionOf<HTMLInputElement>) => {
    if (checkBoxList && checkBoxList.length > 0) {
        console.log(checkBoxList)
        for (let i = 0; i < checkBoxList.length; i++) {
            checkBoxList[i].disabled = true
            let checkboxInput = checkBoxList[i].getElementsByClassName('el-checkbox__input')
            for (let i = 0; i < checkboxInput.length; i++) {
                // console.log('sad', checkboxInput)
                checkboxInput[i].classList.add(IS_DISABLED_CLASS)
            }
        }
    }
}
/**
 * radio禁止
 * @param radioList 
 */
const disabledRadioDomHandle = (radioList: HTMLCollectionOf<HTMLElement>) => {
    if (radioList && radioList.length > 0) {
        for (let i = 0; i < radioList.length; i++) {
            const currentRadio = radioList[i]
            currentRadio.classList.add(IS_DISABLED_CLASS)
            const child = currentRadio.firstChild as HTMLElement
            child?.classList.add(IS_DISABLED_CLASS)
        }
    }
}
/**
 * 文本域禁止
 * @param textareaList 
 */
const disabletextareaDomHandle = (textareaList: HTMLCollectionOf<HTMLElement>) => {
    if (textareaList && textareaList.length > 0) {
        console.log(textareaList)
        for (let i = 0; i < textareaList.length; i++) {
            textareaList[i].classList.add(IS_DISABLED_CLASS)
            textareaList[i].getElementsByTagName('textarea')[0].disabled = true
        }
    }
}

export { disabledDomHandle }

